<template>
  <el-card class="box-card AddNewsContainer">
    <el-form :rules="newsRules" :model="formData" ref="formRef" size="default">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="文章来源" prop="source">
        <el-input v-model="formData.source" placeholder="请输入来源"></el-input>
      </el-form-item>
      <el-form-item style="margin: 50px 0;" label="文章内容" prop="article">
        <el-input v-model="formData.article" type="textarea" rows="8"></el-input>
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-button @click="handlerCancel">取消</el-button>
      <el-button type="primary" @click="handlerSave">保存</el-button>
    </el-form-item>
  </el-card>
</template>

<script>
import {defineComponent} from 'vue'
import {isUserOverdue} from '../../api/index'

export default defineComponent({
  name: 'AddNews'
})
</script>
<script setup>
import {getFindHeadlineByHid, saveOrAddNews, issueNews} from "../../api/index"
import {ref, onMounted} from "vue"
import {useRoute} from 'vue-router'
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'

const router = useRouter()
const route = useRoute()


const formRef = ref()
// 校验规则
const validateArticle = (rule, value, callback) => {
  if (value.length) {
    callback()
  } else {
    callback(new Error('文章内容是必须的'))
  }
}
// 校验规则
const validateTitle = (rule, value, callback) => {
  if (value.length) {
    callback()
  } else {
    callback(new Error('文章标题是必须的'))
  }
}
// 校验规则
const validateSource = (rule, value, callback) => {
  if (value.length) {
    callback()
  } else {
    callback(new Error('文章来源是必须的'))
  }
}
// 校验规则
const newsRules = {
  title: [{required: true, trigger: 'blur', validator: validateTitle}],
  article: [{required: true, trigger: 'blur', validator: validateArticle}],
  source: [{required: true, trigger: 'blur', validator: validateSource}]
}


const formData = ref({
  hid: null,
  title: "",   // 文章标题
  article: "", // 文章内容
  source: "", // 文章来源
})

// 如果是点击修改的话 路由就会携带hid参数  就要发送请求 获取数据回显
const clickModifyEcho = async () => {
  if (!route.query.hid) return
  let result = await getFindHeadlineByHid(route.query.hid)
  formData.value.title = result.headline.title
  formData.value.article = result.headline.article
  formData.value.source = result.headline.source

}
//页面挂载生命周期
onMounted(() => {
  clickModifyEcho()
})
//点击取消的回调
const handlerCancel = () => {
  router.back()
}
//点击保存的回调
const handlerSave = async () => {
  await formRef.value?.validate()
  //发送请求判断用户是否token过期
  await isUserOverdue()
  const Obj = {...formData.value}

  //整理请求参数
  Obj.hid = route.query.hid  //添加用户id 让后端知道谁添加的

  //发送请求
  if (route.query.hid) {
    await saveOrAddNews(Obj)
    ElMessage.success("修改成功")
  } else {
    await issueNews(formData.value)
    ElMessage.success("添加成功")
  }
  router.push({name: "HeadlineNews"});
}


</script>

<style lang="less" scoped>
.AddNewsContainer {
  width: 600px;
  margin: 150px auto;
}
</style>
